<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../../include/tag.jsp"%>
<html>
<head>
<title>分配角色</title>
<link rel="stylesheet" href="${ctxStatic}/layui-v2.2.45/layui/css/layui.css">
<script type="text/javascript" src='${ctxStatic}/jquery/jquery-2.1.4.min.js'></script>
<style type="text/css">
li {
	border: 1px solid #ececec;
    display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	margin-right: 10px;
	margin-bottom: 10px; height : 35px;
	line-height: 35px;
	height: 35px;
}

li:hover{
	cursor: pointer;
}

li.checked {
	background-color: #cfb31b;
	color: white;
}
</style>
</head>
<body>
<div style="padding: 10px;">
    <c:forEach var="role" items="${sysRoles}">
        <c:if test="${fn:length(role.value) > 0}">
            <div style="margin-bottom: 10px">
                <p style="line-height: 25px">${role.key}</p>
                <ul>
                    <c:forEach var="rr" items="${role.value}">
                        <c:set var="flag" value="false"></c:set>
                        <c:forEach var="myRoleId" items="${myRoleIds}">
                            <c:if test="${myRoleId == rr.id}">
                                <c:set var="flag" value="true"></c:set>
                            </c:if>
                        </c:forEach>
                        <c:if test="${flag == true}">
                            <li class="checked" data-id="${rr.id}">${rr.name}</li>
                        </c:if>
                        <c:if test="${flag == false}">
                            <li data-id="${rr.id}">${rr.name}</li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
        </c:if>
    </c:forEach>
</div>
	<form id="inputForm" action="${ctx}/system/role/saveDistributionRole.do?isNew=${isNew}" method="post">
		<input type="hidden" name="roleIds" id="roleIds"/> <input type="hidden" name="memberId" value="${memberId}" />
        <input type="hidden" name="type" value="${type}" />
	</form>
</body>
<script type="text/javascript" src="${ctx}/script/common/util.js"></script>
<script type="text/javascript">
	$(function(){
        var myRoleIds = JSON.parse('${myRoleIdsJson}');
        $("#roleIds").val(myRoleIds.join(","));

        var index = -1;
        $("li").click(function () {
            var roleId = $(this).data("id");
            if (!$(this).hasClass("checked")) {
                $(this).addClass("checked");
                myRoleIds.push(roleId);
            } else {
                $.each(myRoleIds, function (ii, dd) {
                    if (roleId == dd) {
                        index = ii;
                    }
                });
                $(this).removeClass("checked");
                myRoleIds.splice(index, 1);
            }
            $("#roleIds").val(myRoleIds.join(","));
        });
	});

	function doSubmit() {
		var flag = false;

		$.ajax({
			url : $(inputForm).attr("action"),
			type : "POST",
			dataType : "JSON",
			async : false,
			data : $(inputForm).serialize(),
			success : function(res) {
                util.layerMsgSuccess("分配成功")
				flag = res.success;
			},error : function(res) {
                util.layerMsgError("分配失败")
                flag = false;
            }
		});
		return flag;
	}
</script>
</html>